<template>
  <div class="limiter">
    <div
      class="container-login100"
      style="background-image: url('/assets/images/img-01.jpg')"
    >
      <div class="wrap-login100 p-t-190 p-b-30">
        <van-form @submit="onLogin" class="login100-form validate-form">
          <div class="login100-form-avatar">
            <img src="/assets/images/avatar-01.jpg" alt="AVATAR" />
          </div>

          <span class="login100-form-title p-t-20 p-b-45">Hello</span>

          <div
            class="wrap-input100 validate-input m-b-10"
            data-validate="请输入手机号"
          >
            <input
              class="input100"
              type="text"
              name="mobile"
              v-model="LoginAuth.mobile"
              placeholder="手机号"
              autocomplete="off"
            />
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-user"></i>
            </span>
          </div>

          <div
            class="wrap-input100 validate-input m-b-10"
            data-validate="请输入密码"
          >
            <input
              class="input100"
              type="password"
              name="password"
              v-model="LoginAuth.password"
              placeholder="密码"
            />
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-lock"></i>
            </span>
          </div>

          <div class="container-login100-form-btn p-t-10 p-b-30">
            <button class="login100-form-btn">登 录</button>
          </div>

          <div class="text-center w-full">
            <router-link class="txt1" to="/business/base/register">
              立即注册
              <i class="fa fa-long-arrow-right"></i>
            </router-link>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
import { showNotify } from "vant";
export default {
  data() {
    return {
      LoginAuth: {
        mobile: "13023562356",
        password: "",
      },
    };
  },
  methods: {
    async onLogin() {
      let LoginAuth = this.LoginAuth;

      if (!LoginAuth.mobile) {
        showNotify({
          type: "warning",
          message: "请输入手机号",
        });

        return false;
      }

      let Reg = /(^1[3|4|5|6|7|8][0-9]{9}$)/;

      if (!Reg.test(LoginAuth.mobile)) {
        showNotify({
          type: "warning",
          message: "手机号格式错误",
        });

        return false;
      }

      if (!LoginAuth.password) {
        showNotify({
          type: "warning",
          message: "请输入密码",
        });

        return false;
      }

      let result = await this.$api.login(LoginAuth);

      if (result.code === 1) {
        showNotify({
          type: "success",
          message: result.msg,
          duration: 1500,
          onClose: () => {
            this.$cookies.set("LoginAuth", result.data);

            if (this.$route.query.action === "info") {
              this.$router.go(-1);
            } else {
              this.$router.push("/business/base/index");
            }
          },
        });

        return false;
      } else {
        showNotify({
          type: "warning",
          message: result.msg,
        });

        return false;
      }
    },
  },
};
</script>

<style>
@import url("/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css");
@import url("/assets/css/util.css");
@import url("/assets/css/main.css");
</style>